<!-- 文章列表 -->
<template>
	<div>
		<czh-nav></czh-nav>
		<div class="container">
			<el-row :gutter="30">
				<el-col :sm="24" :md="18" style="transition:all .5s ease-out;margin-bottom:30px;">
					<czh-articlelist></czh-articlelist>
				</el-col>
				<el-col id="myElement" :sm="24" :md="6" :style="windowswidth>990&&scrollDistance > 640 ? fixedcol : ''">
					<czh-rightlist></czh-rightlist>
				</el-col>
			</el-row>
		</div>
		<czh-footer/>
	</div>
</template>

<script>
import header from '../components/header.vue'
import articlelist from '../components/articlelist.vue'
import rightlist from '../components/rightlist.vue'
import  footer  from '../components/footer.vue'
export default {
	name: "Share",
	data() { //选项 / 数据
		return {
			scrollDistance: 0,
			domleft: 1000,
			position: 'fixed',
			top: 0,
			left: 0,
			width: 0,
		}
	},
	methods: { //事件处理器
		handleScroll() {
            this.scrollDistance = window.scrollY;
        },
	},
	beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
	computed: {
		windowswidth(){
			window.innerWidth
		},
		fixedcol() {
			return {
				position: this.position,
				top: '0',
				left: this.domleft + 'px',
				width: this.width + 'px',
			}
		}
	},
	mounted() {
		window.addEventListener('scroll', this.handleScroll);
		//获取元素的宽度和距离左边的距离
		const element = document.getElementById('myElement');
		if (element) {
			const rect = element.getBoundingClientRect();
			this.domleft = rect.left;
			this.width = rect.width;
		}
	},
	components: { //定义组件
		'czh-nav': header,
		'czh-articlelist': articlelist,
		'czh-rightlist': rightlist,
		'czh-footer':footer
	},

	created() { //生命周期函数

	}
}
</script>

<style>


</style>
